<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <style type="text/css">
      body,html,#container{
        height: 100%;
        margin: 0px
      }
     .panel {
        background-color: #393D49;
        color: #fff;
        border: 1px solid silver;
        box-shadow: 3px 4px 3px 0px silver;
        position: absolute;
        top: 10px;
        right: 10px;
        border-radius: 5px;
        overflow: hidden;
		padding-left:2px;
      }
     .panel2 {
        background-color: #393D49;
        color: #fff;
        border: 1px solid silver;
        box-shadow: 3px 4px 3px 0px silver;
        position: absolute;
        top: 10px;
        left: 10px;
        border-radius: 5px;
        overflow: hidden;

      }
      #input{
        width: 250px;
        height: 25px;
        border: 0;
        background-color: white;
      }
      #lnglat{
        width: 250px;
        height: 25px;
        border: 0;
        background-color: white;
      }
	.button {
	float:right;
	margin-right:80px;
	display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 18px;
    background-color: #1E9FFF;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    opacity: .9;
	}
	.button:hover {
		opacity: .8;
   		 filter: alpha(opacity=80);
   		 color: #fff;
	}
	.button:active {
		position: relative;
		top: 1px;
	}
    </style>
  </head>
  <body>
   <div id="container" tabindex="0"></div>
   		
		    <div class ='panel2' <if condition="$hidden eq 1">style="display:none"</if> >
		    	<div id="tip" style="width:100%">
				   <input type="text" id="keyword" name="keyword"   value="上海"  placeholder="请输入您要查询的地址"  onfocus='this.value=""' style="width:100%; height:30px;" />
				</div>
		    </div>
		    <div class ='panel' <if condition="$hidden eq 1">style="display:none"</if>>
			    <div style="width:55px;float:left;">地址 ：</div><input id='input'  readonly  placeholder="点击地图显示地址"></input><br>
			    <div style="width:55px;float:left;">经纬度:</div><input id='lnglat'  readonly   placeholder="点击地图显示经纬度"></input><br>
		   </div>
   <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ccc6b555457eebb63fedac30a4a9c68f"></script>
   <script type="text/javascript">
    var map = new AMap.Map('container',{
            resizeEnable: true,
            zoom: 13
    });
    var lat = '';
    var lng = '';
    </script>
    <if condition="$lng neq null">
		 <script type="text/javascript">
		   	 lat = {$lat}; lng = {$lng};
		    	map.setCenter(new AMap.LngLat(lng,lat));			// 经纬度查询 
			        var marker = new AMap.Marker({
			            map:map,
			            bubble:true,
			            position:new AMap.LngLat(lng,lat),
			        });
			        document.getElementById('lnglat').value = lng+","+lat;
			    	//map.clearMap();
			    </script>
	 </if>
    <if condition="$cname neq null">
			    <script type="text/javascript">
			    	var cname = "{$cname}"	;											// 打开地图默认城市查询 
			    	if(!cname){
			    		cname = '029'; 
			    	}
			    	if(!lng){
			    		  var marker = new AMap.Marker({
					            map:map,
					            bubble:true,
					        });
			    	}
			    </script>
	 </if>
    <script>
    AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch','AMap.Geocoder'],function(){
       var geocoder = new AMap.Geocoder({
        });

	    var lnglatXY=[lng,lat];//地图上所标点的坐标
	    geocoder.getAddress(lnglatXY, function(status, result) {
	        if (status === 'complete' && result.info === 'OK') {
	        	var address='',address2='';
            	address = result.regeocode.addressComponent.province+result.regeocode.addressComponent.city+result.regeocode.addressComponent.district;
            	address2 = result.regeocode.formattedAddress;
            	address2 = address2.replace(address,'');
                document.getElementById('input').value = address2;
                
	        }
	    });  
        map.on('click',function(e){
            marker.setPosition(e.lnglat);
            geocoder.getAddress(e.lnglat,function(status,result){
              if(status=='complete'){
            	  	var address='',address2='';
	            	address = result.regeocode.addressComponent.province+result.regeocode.addressComponent.city+result.regeocode.addressComponent.district;
	            	address2 = result.regeocode.formattedAddress;
	            	address2 = address2.replace(address,'');
	                document.getElementById('input').value = address2;
	                document.getElementById('lnglat').value = e.lnglat;
	                confirm();
              }
            })
        });
        var autoOptions = {
                city: cname, //城市，默认全国         
                input: "keyword"//使用联想输入的input的id
              };
              autocomplete= new AMap.Autocomplete(autoOptions);
              var placeSearch = new AMap.PlaceSearch({
                    city:cname,
                    map:map
              });
              if(!lat){
            	  placeSearch.search(cname);
              }
              AMap.event.addListener(autocomplete, "select", function(e){
                 //TODO 针对选中的poi实现自己的功能
                 placeSearch.search(e.poi.name);
              });
              //搜索
              AMap.event.addListener(placeSearch, "markerClick", function(e){
                 document.getElementById("lnglat").value = e.data.location.lng + ',' + e.data.location.lat;
                 document.getElementById('input').value = e.data.address;
                 confirm();
               });
    });
    
    //确认提交
    function confirm(){
    	var lnglat = document.getElementById('lnglat').value;
    	var address = document.getElementById('input').value;
    	if(lnglat == ""){
    		alert("请点击地图空白位置获取地址信息!");
    		return false;
    	}
    	window.parent.call_back_map(lnglat,address);
    }
   </script>
  </body>
</html>